<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
ul,h2 {margin:0; padding:0}
li {list-style:none;}
#list {width:200px; border:1px solid #000; margin:0 auto;}
#list h2 {height:30px; line-height:30px; text-indent:20px;background:url(normal.gif) no-repeat 5px center #0CF; }
#list ul { display:none;}
#list ul li {line-height:24px; text-indent:24px; border-bottom:1px solid #333;}
#list .active {background:url(active.gif) no-repeat 5px center #0CC;}
#list .liOcli {background:#0F6;}
</style>
<script>
window.onload = function (){
 var oList = document.getElementById('list');
 var aH2 = oList.getElementsByTagName('h2');
 var aUl = oList.getElementsByTagName('ul');
 //var aLi = aUl.getElementsByTagName('li');这样写会报错  不能用数组去找数组
 var aLi =null;		//因为li有多个，最好用全局变量 先存起来
 var num = 0;
 var arrLi = [];	//方便后期的添加

 
 for (var i=0;i<aH2.length;i++){
  aH2[i].index = i;		//也可以在这里（函数外）加个开关aH2[i].onOff = true;
  aH2[i].onclick = function (){
   //aH2[i].index = i;  索引值不能放事件内
   if (this.className == ''){  //if里面的判断条件，不能用 = 号，要用 == 或 === ！！！
    aUl[this.index].style.display = 'block';	//不添加索引去匹配，直接写aUl并不能让其发生动作
    aH2[this.index].className = 'active';
   }else{
    aUl[this.index].style.display = 'none';
    aH2[this.index].className = '';
   }
  }
 }
 
 for (var i=0;i<aUl.length;i++){
  aLi = aUl[i].getElementsByTagName('li');
  for (var j=0;j<aLi.length;j++){
   /* aLi[i].onclick = function (){
   this.style.background = '#FF66CC'; 	不能这样写。这样就只有第一个ul的第一个li和第二个ul的第二个li有背景色.不要忙着加点击事件 */
   arrLi.push(aLi[j]);  //把找到的想要的所有Li放到arrLi这个数组里面去，只管找到就好了。以后有有需要改变数组的时候，这边就不用动了。下面就不能用aLi了，因为已经赋值出去了，必须要用arrLi数组去代替它会更好!!!
  }
 }
 
 for (var i=0;i<arrLi.length;i++){ 
  arrLi[i].onclick = function (){	//不能再是aLi[i]
    for(var i=0;i<arrLi.length;i++){
	  arrLi[i].className = '';		//全部清空
	}
    this.className = 'liOcli';
  }
 }

 /*for (var i=0;i<arrLi.length;i++){
  var oldLi = '';	//先给一个空的li
  arrLi[i].onclick = function (){
   oldLi.className = ''; 
   this.className = 'liOcli';
   oldLi = this;
  }
 }*/
 
}
</script>
</head>
<body>
<ul id="list">
 <li class="lis">
  <h2>我的好友</h2>
  <ul>
   <li>张三</li>
   <li>李四</li>
   <li>王五</li>
   <li>赵六</li>
  </ul>
 </li>
 <li class="lis">
  <h2>企业好友</h2>
  <ul>
   <li>张三</li>
   <li>李四</li>
   <li>王五</li>
   <li>赵六</li>
  </ul>
 </li>
 <li>
  <h2 class="lis">黑名单</h2>
  <ul>
   <li>张三</li>
   <li>李四</li>
   <li>王五</li>
   <li>赵六</li></ul>
 </li>
</ul>
</body>
</html>
